<template>
  <div class="login">
    <div class="login-content">
      <!-- 头部开始 -->
      <div class="login-header">
          <img src="../assets/logo/logo-rds.png" alt="">
          {{settings.title}}
      </div>
      <!-- 头部结束 -->
      <!-- 表单开始 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm">
        <el-form-item class="loginForm-item" prop="username">
          <input v-model="loginForm.username" type="text" name="username" placeholder="请输入账号" maxlength="12" required="" autocomplete="off"
          @keyup.enter="handleLogin">
        </el-form-item>
        <el-form-item class="loginForm-item" prop="password">
          <input v-model="loginForm.password" type="password" name="name" placeholder="请输入密码" autocomplete="off"
          @keyup.enter="handleLogin">
        </el-form-item>
        <el-form-item class="loginForm-item">
          <el-checkbox v-model="loginForm.rememberMe" class="loginForm-rememberme">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item class="loginForm-item">
          <span class="loginForm-btn"
            @click="handleLogin">
            <span class="btn" v-if="!loading" type="button">登 录</span>
            <span class="btn" v-else type="button">登 录 中 ...</span>
          </span>
        </el-form-item>
        <el-form-item class="loginForm-item">
          <span class="login-agreement">登录即代表同意<span>用户协议</span>和<span>隐私条款</span></span>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <!--  底部开始  -->
      <div class="login-footer">
        Copyright © 2019-2021 RDS All Rights Reserved.
      </div>
      <!--  底部结束  -->
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import {getUserProfile} from "@/api/system/user";
import {getMenuData} from "@/api/system/menu";

function resetrem(){
  var html = document.querySelector("html");//获取到html元素
  var width = html.getBoundingClientRect().width;//获取屏幕的宽度
  html.style.fontSize = width/16+"px";
}
export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" }
        ]
      },
      loading: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCookie();
  },
  mounted(){
    resetrem();
    //切换屏幕 （横屏竖屏）
    // window.addEventListener("orientationchange", resetrem);
    //resize：屏幕的大小发生改变就触发监听事件resetrem
    // window.addEventListener("resize",resetrem);

    window.addEventListener('resize',resetrem())
  },
  beforeDestroy(){
    var html = document.querySelector("html");
    html.style.fontSize = "16px";
    window.removeEventListener('resize')
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.path='/index'
              getUserProfile().then(response => {
                this.user = response.data;
                getMenuData(this.user.homeMenu).then(response => {
                  if(response.data[0]){
                    this.$router.push({ path: response.data[0].path || "/" });
                  }else{
                    this.$router.push({ path: this.path || "/" });
                  }
                });
              });
            })
            .catch(() => {
              this.loading = false;
              // this.getCode();
            });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
  height: 100%;
  background:#0A121D url("../assets/image/bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.login-content{
  width: 30%;
  height: 66%;
  background: #F0F2F5;
  border-radius: 0.1rem;
  opacity: 1;
  border: 0.01rem solid #FFFFFF;
  position: absolute;
  top: 12%;
  right: 10%;
  .login-header{
    height: 8%;
    font-size: 0.32rem;
    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
    font-weight: 600;
    color: #333333;
    line-height: 1.2;
    padding: 7% 0;
    text-align: center;
    img{
      width: 23%;
      // height: 47px;
      border-radius: 0;
      opacity: 1;
      vertical-align: bottom;
    }
  }
  .loginForm{
    // text-align: center;
    .el-form-item{
      margin: 0;
    }
    .loginForm-item{
      padding: 0.12rem 0;
      text-align: center;
      .login-agreement{
        font-size: 0.14rem;
      }
      .loginForm-rememberme{
        width: 90%;
        height: 0.17rem;
        line-height: 0.15rem;
        text-align: left;
        .el-checkbox__label{
          font-size: 0.13rem;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    .loginForm-btn{
      width: 80%;
      height: 0.6rem;
      background: #2F5D9D;
      border-radius: 0.1rem;
      opacity: 1;
      display: inline-block;
      .btn{
        width: 100%;
        height: 100%;
        font-size: 0.15rem;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 0.6rem;
      }
    }
  }
  input{
    width: 90%;
    height: 0.6rem;
    background: #FFFFFF;
    border-radius: 0.1rem;
    opacity: 1;
    border: 0.01rem solid #D9D9D9;
    font-size: 0.18rem;
  }
  .login-footer {
    height: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -0.3rem;
    color: #999999;
    font-size: 0.12rem;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
  }
}
</style>
